<template lang="html">
    <el-row class="container">
        <el-col :span="18">
            <div class="hotnewsBox">
                      <div v-if="topicList.length != 0" v-for="topic in topicList"style="height: 100%;box-shadow: 0 1px 3px grey;margin-bottom: 13px;">
                            <div>
                                    <img :src="topic.user.headimage"  style="width:50px;height:50px;border-radius: 50%;"/>
                                    <div style="position: relative;left: 55px;top: -45px;">
                                    <label >{{topic.user.petname}}</label><br>
                                     <label style="font-size: 10px;color: cadetblue;">{{topic.time}}</label>
                                    </div>
                            </div>
                         <div style="margin-top:-25px">
                             <font color="blue">#{{topic.title}}#</font>
                            <font>{{topic.contents}}</font>
                        </div>

                         <div style="margin-top: 15px;">
                                <span v-for="img in topic.image" style="margin-left: 5px;">
                                        <img :src="img.image" style="width:150px;height:150px;"/>
                                 </span>
                                
                         </div>
                         <div style="margin-top: 10px;margin-left: 15px;">
                                <font color="teal" > 浏览 20 评论 {{topic.comments.length}}</font>
                         </div>
                      </div>
                      <div v-else>没有更多数据了！</div>
                     
            </div>
            
        </el-col>
    </el-row>
</template>

<script>

import axios from "axios";

export default {

  name: "Hotnews",
  data () {
    return {
    topicList:[],
    page: 0

    }
  },
  created(){
    this.getAllTopic()
  },
  methods:{
    getAllTopic: function(){
       var url = "/api/consumer-index/around_consumer/getTopic/" + this.page
        axios.get(url).then(res => {
            console.log(res.data)
            this.topicList = res.data
        })
    }
  },
  metaInfo: {
    title: '热门文章'
  },
  components: {

  }
}
</script>

<style lang="css">
.hotnewsBox {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(100, 100, 100, 0.3);
}
</style>
